<template>
  <div class="tag-system">
    <div v-if="showFilter" class="tag-filter">
      <span class="filter-label">{{ filterLabel }}:</span>
      <div class="tag-list">
        <el-tag
          v-for="tag in tags"
          :key="tag.id || tag.value"
          :type="isSelected(tag) ? '' : 'info'"
          :effect="isSelected(tag) ? 'dark' : 'plain'"
          class="tag-item"
          @click="toggleTag(tag)"
          :class="{ 'is-active': isSelected(tag) }"
        >
          {{ tag.label || tag.name }}
        </el-tag>
        
        <el-button
          v-if="showClearFilter && selectedTags.length > 0"
          size="small"
          type="text"
          @click="clearFilter"
        >
          清除筛选
        </el-button>
      </div>
    </div>
    
    <div v-if="!showFilter" class="tag-display">
      <el-tag
        v-for="tag in tags"
        :key="tag.id || tag.value"
        :type="tagType"
        :effect="tagEffect"
        class="tag-item"
        @click="$emit('tag-click', tag)"
      >
        {{ tag.label || tag.name }}
      </el-tag>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TagSystem',
  props: {
    tags: {
      type: Array,
      required: true,
      default: () => []
    },
    showFilter: {
      type: Boolean,
      default: true
    },
    filterLabel: {
      type: String,
      default: '标签'
    },
    tagType: {
      type: String,
      default: ''
    },
    tagEffect: {
      type: String,
      default: 'light',
      validator: value => ['plain', 'dark', 'light'].includes(value)
    },
    modelValue: {
      type: Array,
      default: () => []
    },
    showClearFilter: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:modelValue', 'tag-click', 'filter-change'],
  computed: {
    selectedTags: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit('update:modelValue', value);
      }
    }
  },
  methods: {
    isSelected(tag) {
      const tagId = tag.id || tag.value;
      return this.selectedTags.some(selectedTag => 
        (selectedTag.id || selectedTag.value) === tagId
      );
    },
    toggleTag(tag) {
      const tagId = tag.id || tag.value;
      
      if (this.isSelected(tag)) {
        // 移除标签
        this.selectedTags = this.selectedTags.filter(selectedTag => 
          (selectedTag.id || selectedTag.value) !== tagId
        );
      } else {
        // 添加标签
        this.selectedTags = [...this.selectedTags, tag];
      }
      
      this.$emit('filter-change', this.selectedTags);
    },
    clearFilter() {
      this.selectedTags = [];
      this.$emit('filter-change', []);
    }
  }
}
</script>

<style lang="scss" scoped>
.tag-system {
  margin-bottom: 20px;
  
  .tag-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    
    .filter-label {
      font-weight: 600;
      margin-right: 10px;
      color: #606266;
      font-size: 14px;
    }
    
    .tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      flex: 1;
    }
  }
  
  .tag-display {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .tag-item {
    cursor: pointer;
    transition: all 0.3s;
    
    &.is-active {
      transform: scale(1.05);
    }
    
    &:hover {
      opacity: 0.8;
    }
  }
}

@media (max-width: 768px) {
  .tag-system {
    .tag-filter {
      flex-direction: column;
      align-items: flex-start;
      
      .filter-label {
        margin-bottom: 10px;
      }
    }
  }
}
</style> 